<template>
    <div class="kfHumanConfig">
        <van-nav-bar
                title="人员池"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px"></div>
        <div class="top-column">
            <van-field v-model="peopleName" left-icon="search" @click="" placeholder="搜索姓名"/>
            <div class="line">

                <van-field readonly clickable :value="channelName" placeholder="--选择派遣工种--"
                           @click="clientPicker = true"/>
                <div style="width: 10px"></div>
                <van-field readonly clickable :value="sexName" placeholder="--选择性别--" @click="sexPicker = true"/>
            </div>

            <div class="search-btn" @click="getList()">搜索</div>
        </div>
        <van-popup v-model="sexPicker" position="bottom">
            <van-picker show-toolbar :columns="sexSource" :default-index="0" value-key="name"
                        @cancel="sexPicker = false" @confirm="onSexChange"/>
        </van-popup>
        <van-popup v-model="clientPicker" position="bottom">
            <van-picker show-toolbar :columns="channelSource" :default-index="channelIndex" value-key="name"
                        @cancel="clientPicker = false" @confirm="onClient"/>
        </van-popup>
        <el-table :data="tableData" border style="width: 100%" @selection-change="tableSelectChange">
            <el-table-column fixed type="selection"></el-table-column>
            <el-table-column fixed prop="realname" label="姓名" width="120"></el-table-column>
            <el-table-column prop="sex_text" label="性别" width="50"></el-table-column>
            <el-table-column prop="age_str" label="年龄" width="50"></el-table-column>
            <el-table-column prop="certificate_code" label="身份证号" width="180"></el-table-column>
            <el-table-column prop="mobile" label="手机号" width="120"></el-table-column>
            <el-table-column prop="address" label="家庭住址" width="120"></el-table-column>
            <el-table-column prop="certificate_type" label="派遣工种" width="120"></el-table-column>
            <el-table-column prop="unit_price" label="派遣工资" width="120"></el-table-column>
            <el-table-column prop="update_time" label="更新时间" width="120"></el-table-column>
        </el-table>
        <van-pagination class="pagination" v-model="page" :page-count="pageCount" @change="pageChange"/>
        <van-button class="pagination" type="warning" @click="addTable" size="large">确定</van-button>
    </div>
</template>

<script>
    // confirmDialog
    export default {
        name: "kfHumanPoolList",
        components: {},
        data() {
            return {
                activeNames: ['1'],
                tableData: [],
                page: 1,
                limit: 10,
                pageCount: 10,
                tableSelectValArr: [],
                channelSource: [
                    {
                        name: '123'
                    }
                ],
                peopleName: '',//搜索姓名
                channelIndex: 0,
                channelName: '',
                clientPicker: false,
                sexSource: [
                    {name: '全部', id: 0},
                    {name: '男', id: 1},
                    {name: '女', id: 2}
                ],
                sexIndex: 0,
                sexName: '',
                sexPicker: false,

            }
        },
        methods: {
            onClient(value, index) {
                this.channelIndex = index;
                this.channelName = value.name
                this.clientPicker = false;
            },
            onSexChange(value, index) {
                this.sexIndex = value.id;
                this.sexName = value.name
                this.sexPicker = false;
            },
            pageChange() {
                this.getList();
            },
            getList() {
                let params = {
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    token: localStorage.getItem('token'),
                    eq_sex: this.sexIndex || '',
                    li_certificate_type: this.channelName || '',
                    li_realname: this.peopleName || '',
                    page: this.page,
                    limit: this.limit,
                    cate_id: 4,
                };
                this.$post("/api/order_roster/pool", params)
                    .then(res => {
                        if (res.code == 1) {
                            this.pageCount = res.data.totalPage // 发票类型
                            this.tableData = res.data.dataList // 发票类型
                            this.tableDataId = this.$route.query.id
                            this.tableData.map((item) => {
                                if (item.sex == 1) {
                                    item.sex_text = '男'
                                } else {
                                    item.sex_text = '女'
                                }
                            })
                            this.$Toast.clear();
                        }
                    }).catch(err => {
                });
            },
            getJobType() {
                let params = {
                    token: localStorage.getItem('token'),
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    cate_id: 4,
                };
                this.$post("/api/order_roster/certificate_type_list", params)
                    .then(res => {
                        if (res.code == 1) {
                            this.channelSource = res.data
                            this.channelSource.forEach((item) => {
                                item.name = item.value
                            })
                        }
                    })
                    .catch(err => {
                    });
            },
            tableSelectChange(val) {
                this.tableSelectValArr = val;
            },
            addTable() {

                if (this.tableSelectValArr.length == 0) {
                    this.$Toast('请选择人员')
                    return;
                }
                let Arr = []
                this.tableSelectValArr.map((item, index) => {
                    Arr.push(item.id)
                })
                this.$Dialog.confirm({
                    title: '温馨提示',
                    message: '确认添加这几个人员么',
                    closeOnPopstate: true,
                })
                    .then(() => {
                        let params = {
                            wx_member_id: localStorage.getItem('wx_member_id'),
                            token: localStorage.getItem('token'),
                            member_goods_id: this.tableDataId,
                            ids: Arr,
                        };
                        this.$post("/api/order_roster/save_select_pool", params)
                            .then(res => {
                                if (res.code == 1) {
                                    // this.getList();
                                    this.$Toast(res.msg);
                                    setTimeout(() => {
                                        this.$router.go(-1)
                                    }, 1000)
                                }
                            })

                    })
                    .catch(() => {
                    });
            },
        },
        created() {
            this.$Toast.loading({
                duration: 0, // 持续展示 toast
                message: '加载中...',
                forbidClick: true
            });

            this.getList();
            this.getJobType()
        },

    }
</script>

<style scoped lang="less">
    .kfHumanConfig {
        padding: 15px;
    }

    .top-column {
        /*display: flex;*/
        /*align-items: center;*/
        margin-bottom: 15px;

        .van-cell {
            border: 1px solid #dcdcdc;
            border-radius: 3px;
            padding: 3px 10px;
            margin-bottom: 5px;
        }

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #fff;
            width: 45vw;
            height: 32px;
            margin: 5px;
            background-image: linear-gradient(90deg, #5b8ed1 1%, #366cb3 100%);
            border-radius: 5px;
        }

        .search-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #fff;
            height: 38px;
            margin: 5px;
            background-image: linear-gradient(90deg, #5b8ed1 1%, #366cb3 100%);
            border-radius: 5px;
        }
    }

    .pagination {
        margin-top: 11px;
    }

    .date-box {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 11px;

        > div:nth-of-type(1) {
            width: 70px;
        }
    }

    .line {
        display: flex;
        align-items: center;

        .border-line {
            border: 1px solid #dcdcdc;
            padding: 0 2px;
            margin: 0 3px;
            border-radius: 3px;
        }

        .time-text {
            flex-wrap: nowrap;
            width: 50px;
            font-size: 15px;
            color: #333333;
        }

        > .money-box {
            position: relative;

            > div {
                flex: 1;
                margin: 3px 6px;
                border: 1px solid #dcdcdc;
                color: #333;
                border-radius: 5px;
            }

            > .money-box {
                position: relative;

                span {
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                }

                input {
                    border: none;
                    padding-left: 6px;
                    height: 25px;
                    width: 112px;
                    padding-right: 1px;
                    font-size: 11px;
                    text-align: right;
                }
            }
        }
    }

    .table-box {
        overflow-x: scroll;
    }
</style>